<template>
  <div class="home">
    <div class="top">
      <!-- 搜索框 -->
      <van-search
        v-model="keywords"
        shape="round"
        background="red"
        placeholder="请输入搜索关键词"
      />
      <div class="search">
        <li v-for="item in search(keywords)" :key="item._id">
          <p @click="godetail(item._id)">{{ item.name }}</p>
        </li>
      </div>
      <!-- 商品轮播 -->
      <van-swipe class="my-swipe" :autoplay="1000" indicator-color="white">
        <van-swipe-item v-for="item in images" :key="item._id">
          <img :src="item.coverImg" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 商品列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getProductList"
    >
      <li
        v-for="item in productList"
        :key="item._id + Math.random()"
        @click="godetail(item._id)"
      >
        <van-card
          :price="item.price"
          :desc="item.descriptions"
          :title="item.name"
          :thumb="item.coverImg"
        />
      </li>
    </van-list>
  </div>
</template>

<script>
import { reqLunboP, reqProductList } from "@/api/product";
export default {
  data() {
    return {
      // 搜索框的关键字
      keywords: "",
      show: false,
      // 轮播的图片数组
      images: [],
      // 商品列表
      productList: [],
      // 加载的默认值
      loading: false,
      finished: false,
      page: 1,
    };
  },
  computed: {},
  watch: {},

  methods: {
    // 获取轮播图的数组，调用接口。
    async getLunboP() {
      let data = {
        per: 4,
        page: 2,
      };
      const res = await reqLunboP(data);
      // console.log(res);
      this.images = res.products;
    },
    // 获取商品列表，调用接口结合加载更多
    async getProductList() {
      // 开启加载框
      this.loading = true;
      const data = {
        pre: 10,
        page: this.page,
      };
      // 调用接口
      const res = await reqProductList(data);
      // 关闭加载框
      this.loading = false;
      console.log(res);
      // 判断获取的长度小于10，说明没有商品了
      if (res.products.length < 10) {
        // 说明是最后一页
        this.finished = true;
      } else {
        this.page++;
      }
      // 当向下加载的时候，要让之前的数组加加载的数组
      this.productList = [...this.productList, ...res.products];
    },
    // 搜索框  方法一旦在页面调用就会把return的结果渲染。
    search(keywords) {
      let searchArr = [];
      if (keywords == "") {
        searchArr = [];
      } else {
        // 遍历数组
        searchArr = this.productList.filter((item) => {
          // 如果数组中的名字中有关键字，就添加到新的数组。
          if (item.name.includes(keywords)) {
            return item;
          }
        });
      }
      return searchArr;
    },
    // 点击商品跳转详情页
    godetail(id) {
      this.$router.push("/detail/" + id);
    },
  },
  created() {
    // 在这里调用方法函数
    this.getLunboP();
    // 使用获取商品列表方法
    this.getProductList();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.top {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 1;
}
.top .van-search {
  width: 100%;
}
.search {
  position: absolute;
  top: 50px;
  z-index: 2;
  width: 100%;
}
.search p {
  background-color: aqua;
  width: 100%;
  height: 25px;
  line-height: 25px;
  text-indent: 20px;
  border-bottom: 1px dashed #ccc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.my-swipe {
  width: 100%;
  height: 250px;
}
.my-swipe img {
  width: 100%;
  height: 250px;
}
li {
  list-style: none;
}
.van-list {
  margin-top: 305px;
  margin-bottom: 40px;
}
</style>
